<template>
   <div class="wrap">
      <div class="left">
         <div class="title">设备示意图</div>
         <div class="device">
            <img src="../assets/img/device.png" alt="">
         </div>
         <div class="content">
            <ul>
               <li>1.1#采出液换热器热源出</li>
               <li>2.采出液换热器热源超越闸门</li>
               <li>3.2#采出液换热器热源出</li>
               <li>4.1#采出液换热器热源进</li>
               <li>5.2#采出液换热器热源进</li>
               <li>6.1#采出液换热器冷源进</li>
               <li>7.2#采出液换热器冷源进</li>
               <li>8.1#采出液换热器冷源出</li>
               <li>9.2#采出液换热器冷源出</li>
               <li>10.1#采出液换热器热源排泥</li>
               <li>11.1#采出液换热器冷源排泥</li>
               <li>12.2#采出液换热器热源排泥</li>
               <li>13.2#采出液换热器冷源排泥</li>
            </ul>
            <div class="c-bottom">
               <span>1#采出液螺旋板换热器发生内漏</span><br/>
               <span>措施:需要切换备用采出液螺旋板换热</span>
            </div>
         </div>
      </div>
      <div class="right">
         <div class="title">验证步骤</div>
         <ul>
            <li>1、打开<span>1#采出液螺旋板换热器热源排污闸门</span>，观察<span>热源出口压力表</span></li>
            <li>2、直到压力完成到零，关闭<span>热源出口</span></li>
            <li>3、缓慢打开<span>热源进口闸门</span>，观察<span>冷源进口压力</span>，<span>热源出口压力</span></li>
            <li>4、随着冷源投入，<span>热源出口压力</span>上涨直至与<span>冷源进口压力</span>一致，验证判断为内漏</li>
         </ul>
      </div>
   </div>
</template>

<script>

export default {
   name: 'LeakageWarning',
   data() {
      return {

      }
   },
}
</script>

<style lang="scss" scoped>
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.wrap {
   width: 100%;
   height: 100vh;
   background-image: url('../assets/img/bg.png');
   background-repeat: no-repeat;
   background-size: cover;
   display: flex;

   .left {
      width: 55%;
      height: 100%;
      padding: 20px;

      .title {
         width: 100%;
         height: 40px;
         background-image: url('../assets//img/titlebg.png');
         background-repeat: no-repeat;
         background-size: cover;
         line-height: 40px;
         text-align: center;
         border-radius: 5px;
         color: #69abff;
         font-size: 24px;
         font-weight: 700;
      }

      .device {
         img {
            width: 100%;
         }
      }

      .content {
         font-size: 24px;
         color: #fff;
         font-weight: 700;
         ul {
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            height: 100%;
            li {
               margin-top: 10px;
               margin-left: 10px;
            }
         }
         .c-bottom{
            text-align: center;
            margin-top: 60px;
            span:nth-child(1){
               color: #f20000;
            }
            span:nth-child(3){
               color: #4df755;
            }
         }
      }
   }

   .right {
      width: 45%;
      height: 40px;
      padding: 20px;

      .title {
         width: 100%;
         height: 40px;
         background-image: url('../assets//img/titlebg.png');
         background-repeat: no-repeat;
         background-size: cover;
         line-height: 40px;
         text-align: center;
         border-radius: 5px;
         color: #ff7372;
         font-size: 24px;
         font-weight: 700;
      }

      ul {
         border: 1px solid #fff;
         color: #4df755;
         font-size: 24px;
         font-weight: 700;
         margin-top: 20px;

         li {
            border-bottom: 2px solid #fff;
            padding: 30px;

            span {
               color: #ff7372;
            }
         }

         li:nth-child(1) {
            // background-image: url('../assets/img/bumb.png');
            // background-repeat: repeat;
            // background-size: cover;
         }
      }
   }
}
</style>